<template>
  <div class="chart">
    <el-container>
      <el-aside class="aside1"><chartOperation></chartOperation> </el-aside>
      <el-container>
        <el-main><chartMain></chartMain></el-main>
        <el-aside class="aside2"><chartContent></chartContent></el-aside>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
export default {
  // name: "chart",
};
</script>
<script setup lang="ts">
import chartMain from "./chartMain.vue";
import chartOperation from "./chartOperation.vue";
import chartContent from "./chartContent.vue";
</script>
<style scoped lang="scss">
.chart {
  position: relative;
  left: -20px;
  top: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  .el-container {
    width: 100%;
    height: 100%;
  }

  .aside1 {
    height: 100%;
    width: 30%;
  }
  .el-main {
    border-left: 1px solid rgb(179, 177, 177);
    border-right: 1px solid rgb(179, 177, 177);

    height: 100%;
  }
  .aside2 {
    height: 100%;
    width: 25%;
  }
}
</style>
